<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" method="post">
        <p>　用户名：<input type="text" name="username"></p>
        <p>邮箱地址：<input type="text" name="email"></p>
        <p>　　密码：<input type="password" name="password"></p>
        <p>密码确认：<input type="password" name="repassword"></p>
        <p id="tip" style="text-indent:5em;color:#c00;display:none;"></p>
        <p style="text-indent:5em;"><input type="submit" value="提交"></p>
    </form>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="./formModel.js"></script>
    <script>
        var Mod = formModel.create({
            $v: function(){
                return [
                    // [*字段名, *验证操作, *错误提示, 验证方法, 验证条件, 额外补充]
                    // {name:字段名, action:验证操作, error:错误提示, type:验证方法, condition:验证条件, extra:额外补充}
                    // 字段名  ：必填，表单name值
                    // 验证操作：必填，根据type指定不同的操作，type缺省情况下为正则表达式验证
                    // 错误提示：必填，验证不通过时候提示的错误信息
                    // 验证方法：可选，指定操作的类型，缺省regexp
                    //              支持 regexp、 callback、 confirm、 equal、 in、 length、 lengthAt、between
                    //              反向!regexp、!callback、!confirm、!equal、!in、!length、!lengthAt、!between
                    //              备注：反向情况下，结果取反
                    //              regexp   正则表达式，支持使用字符串选择预设的正则表达式：
                    //                           "require"   : /\S+/,    // 不为空
                    //                           "email"     : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,      // 邮箱
                    //                           "url"       : /^http(s?):\/\/(?:[A-za-z0-9-]+\.)+[A-za-z]{2,4}(?:[\/\?#][\/=\?%\-&~`@[\]\':+!\.#\w]*)?$/,   // 链接地址
                    //                           "currency"  : /^(0|[1-9][0-9]*)(\.[0-9]{1,2})?$/,   // 货币
                    //                           "number"    : /^\d+$/,                              // 数字
                    //                           "zip"       : /^\d{6}$/,                            // 邮编
                    //                           "integer"   : /^(0|-?[1-9][0-9]*)$/,                // 整数
                    //                           "pinteger"  : /^(0|[1-9][0-9]*)$/,                  // 正整数
                    //                           "double"    : /^-?(0|[1-9][0-9]*)\.[0-9]+$/,        // 浮点数
                    //                           "pdouble"   : /^(0|[1-9][0-9]*)\.[0-9]+$/,          // 正浮点数
                    //                           "english"   : /^[A-Za-z]+$/,                        // 英文字母
                    //                           "chinese"   : /^[\u4e00-\u9fa5]+$/                  // 汉字
                    //              callback 回调验证，函数，通过返回bool值以确认验证的通过性
                    //              confirm  关联其它字段，例如注册表单中的确认密码可直接关联密码，对应的操作为密码的name值
                    //              equal    等于某值
                    //              in       在指定数组范围内
                    //              length   字符长度
                    //              lengthAt 字节长度，可使用extra额外补充设置一个汉字占用的字节数，缺省字节数为2
                    //              between  验证数字的范围
                    // 验证条件：可选，支持三种条件：
                    //              0或formModel.EXISTS_VALIDATE   存在时验证
                    //              1或formModel.MUST_VALIDATE     必须验证
                    //              2或formModel.VALUE_VALIDATE    值不为空时验证
                    // 额外补充：可选，用于个别验证操作需要的额外设置，暂时只有lengthAt用到
                    ["username", "require", "请输入用户名。"],
                    ["username", [6, null], "用户名长度过短，请限制在6-20个字节，1个汉字为2个字节。", "lengthAt"],
                    ["username", [null,20], "用户名长度过长，请限制在6-20个字节，1个汉字为2个字节。", "lengthAt"],
                    ["username", /\d{5}/,   "用户名中不能包含多个数字，推荐使用中文用户名。", "!regexp"],

                    ["email",    "require", "请输入邮箱地址。"],
                    ["email",    "email",   "邮箱地址格式有误。"],

                    ["password", "require",            "请设置密码。"],
                    ["password", /^[a-zA-Z]+$/,        "密码不能为纯字母。", "!regexp"],
                    ["password", /^\d+$/,              "密码不能为纯数字。", "!regexp"],
                    ["password", /^_+$/,               "密码不能为纯符号。", "!regexp"],
                    ["password", /^[_0-9a-z]{6,20}$/i, "密码为6-20个字符，请使用字母加数字或下划线组合密码。"],

                    ["repassword", "require",  "请输入确认密码。"],
                    ["repassword", "password", "两次密码不匹配。", "confirm"]
                ]
            }
        });
        $("form").submit(function(){
            $("#tip").hide();
            Mod.check(formModel.serializeObject(this), function(err, name, data){
                // err:错误信息，name:引发错误的name，data:三大自动处理后的数据
                if(err){
                    $("#tip").html(err).show();
                    $("input[name="+name+"]").focus();
                }else{
                    alert("OK");
                    console.log(data);
                }
            })
            return false;
        });
    </script>
</body>
</html>
